<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
</h:head>

<h:body>
	<h:form>
		<p:growl id="growl" life="3000" />
		<p:scrollPanel mode="native" style="width:100%;height:100%;">
			<p:fieldset legend="Cadastrar face de quadra">
				<p:wizard flowListener="#{facequadraBean.onFlowProcess}">
					<p:tab title="Básico">
						<p:panel
							header="Informações sobre o número, prancha e CEP da face de quadra">
							<p:messages />

							<h:panelGrid columns="2" columnClasses="label, value">
								<h:outputText value="Número: " />
								<p:inputMask mask="?9999" required="true"
									requiredMessage="Número da face de quadra não informado!"
									value="#{facequadraBean.facequadra.numeroFacequadra}" />

								<h:outputText value="Prancha: " />
								<p:inputMask mask="999999" required="true"
									requiredMessage="Código da prancha não informado!"
									value="#{facequadraBean.facequadra.pranchaFacequadra}"
									maxlength="6" />

								<h:outputText value="CEP (opcional): " />
								<p:inputMask mask="99999-999"
									value="#{facequadraBean.facequadra.cepFacequadra}" />
							</h:panelGrid>
						</p:panel>
					</p:tab>

					<p:tab title="Serviços">
						<p:panel
							header="Informações sobre os serviços básicos fornecidos à face de quadra">

							<p:messages />

							<h:panelGrid columns="2" columnClasses="label, value">
								<h:outputText value="Rede de água: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.redeAgua}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Rede de telefônica: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.redeTelefonica}"
									onLabel="Sim" offLabel="Não" onIcon="ui-icon-check"
									offIcon="ui-icon-close" style="width:70px" />

								<h:outputText value="Rede elétrica: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.redeEletrica}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Rede de esgoto: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.redeEsgoto}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Emplacamento: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.emplacamento}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Arborização: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.arborizacao}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Sarjetas: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.sarjetas}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Galerias pluviais: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.galeriasPluviais}"
									onLabel="Sim" offLabel="Não" onIcon="ui-icon-check"
									offIcon="ui-icon-close" style="width:70px" />

								<h:outputText value="Iluminação: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.iluminacao}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Colexta de lixo: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.coletaLixo}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Limpeza: " />
								<p:selectBooleanButton
									value="#{facequadraBean.facequadra.limpeza}" onLabel="Sim"
									offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
									style="width:70px" />

								<h:outputText value="Pavimentação: " />
								<p:selectOneRadio
									value="#{facequadraBean.facequadra.pavimentacao}">
									<f:selectItem itemLabel="Sem pavimentação" itemValue="SEM" />
									<f:selectItem itemLabel="Asfalto" itemValue="ASFALTO" />
									<f:selectItem itemLabel="Paralelepipedo"
										itemValue="PARALELEPIPEDO" />
									<f:selectItem itemLabel="Concreto" itemValue="CONCRETO" />
									<f:selectItem itemLabel="Poliedro" itemValue="PROLIEDRO" />
									<f:selectItem itemLabel="Escadaria" itemValue="ESCADARIA" />
									<f:selectItem itemLabel="Outros" itemValue="OUTROS" />
								</p:selectOneRadio>
							</h:panelGrid>
						</p:panel>
					</p:tab>

					<p:tab title="Confirmar">
						<p:panel
							header="Confirmação dos dados de cadastro da face de quadra">
							<p:messages />

							<h:panelGrid columns="4" columnClasses="label, value">
								<h:outputText value="Número: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.numeroFacequadra}" />

								<h:outputText value="Prancha: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.pranchaFacequadra}" />

								<h:outputText value="CEP: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.cepFacequadra}" />

								<h:outputText value="Rede de água: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoRedeAgua}" />

								<h:outputText value="Rede telefônica: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoRedeTelefonica}" />

								<h:outputText value="Rede elétrica: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoRedeEletrica}" />

								<h:outputText value="Rede de esgoto: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoRedeEsgoto}" />

								<h:outputText value="Emplacamento: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoEmplacamento}" />

								<h:outputText value="Arborização: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoArborizacao}" />

								<h:outputText value="Sarjetas: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoSarjetas}" />

								<h:outputText value="Galerias pluviais: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoGaleriasPluviais}" />

								<h:outputText value="Iluminação: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoIluminacao}" />

								<h:outputText value="Coleta de lixo: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoColetaLixo}" />

								<h:outputText value="Limpeza: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.textoLimpeza}" />

								<h:outputText value="Pavimentação: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{facequadraBean.facequadra.pavimentacao}" />
							</h:panelGrid>

							<p:commandButton value="Cadastrar" update="growl" process="@this"
								actionListener="#{facequadraBean.salvar}" />
						</p:panel>
					</p:tab>
				</p:wizard>
			</p:fieldset>
		</p:scrollPanel>
	</h:form>
</h:body>
</html>